<script setup lang="ts">
import {CalendarDateType, CalendarInstance} from "element-plus";
import {TypeUtils} from "/@/utils/TypeUtils.ts";

const props = defineProps({
  modelValue:{

  }
})
const emits= defineEmits(['update:modelValue'])
const selectDayList = ref([])


const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

watch(()=>props.modelValue,()=> {
  if (props.modelValue) {
    if (!TypeUtils.isArray(props.modelValue)) {
      selectDayList.value = props.modelValue.split(',')
    }
  }
})


const handleSelect=(row)=> {
  let day = row.day
  let index = selectDayList.value.indexOf(day);
  if (index > -1) {
    selectDayList.value.splice(index,1)
  } else {
    selectDayList.value.push(day)
  }

  emits('update:modelValue',selectDayList)
}

const handleCleanDate=()=> {
  selectDayList.value = []
}
</script>

<template>
  <el-calendar ref="calendar">

    <template #header="{ date }">
      <div></div>
      <span>{{ date }}</span>
      <div>
        <el-button size="small" type="danger" v-if="selectDayList.length > 0" @click="handleCleanDate">清除已选({{selectDayList.length}})</el-button>
        <el-button-group style="margin-left: 30px;">

          <el-button size="small" @click="selectDate('prev-month')">
            上一月
          </el-button>
          <el-button size="small" @click="selectDate('today')">今天</el-button>
          <el-button size="small" @click="selectDate('next-month')">
            下一月
          </el-button>
        </el-button-group>
      </div>
    </template>

    <template #date-cell="{ data }">
      <div style="height: 100%;padding: 8px" :class="{'selected':selectDayList.indexOf(data.day) > -1}" @click="handleSelect(data)">
        {{ data.day.split('-').slice(1).join('-') }}
        <span v-if="selectDayList.indexOf(data.day) > -1">可预约</span>
      </div>
    </template>
  </el-calendar>
</template>

<style scoped lang="scss">
.selected {
  background-color: #3d8a2a;
  color: #ffffff;
}

:deep() {
  .el-calendar-day {
    padding: 0;
  }
}
</style>
